<template>
  <view class="messages-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont">&#xe697;</text>
      </view>
      <view class="title">
        <text>消息中心</text>
      </view>
    </view>
    
    <!-- 消息筛选选项卡 -->
    <view class="filter-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        class="tab-item" 
        :class="{ 'active': activeTab === index }"
        @tap="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>
    
    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y="true" @scrolltolower="loadMore">
      <view v-if="messages.length === 0" class="empty-state">
        <view class="empty-icon">
          <text class="iconfont">&#xe65e;</text>
        </view>
        <text class="empty-text">暂无消息</text>
      </view>
      
      <view v-else>
        <view 
          v-for="(msg, index) in messages" 
          :key="index" 
          class="message-item"
          :class="{ 'unread': !msg.read }"
          @tap="readMessage(index)"
        >
          <view class="avatar">
            <view class="avatar-img">
              <text class="iconfont">{{ msg.icon }}</text>
            </view>
            <view v-if="!msg.read" class="unread-badge"></view>
          </view>
          
          <view class="message-content">
            <view class="message-header">
              <text class="sender">{{ msg.sender }}</text>
              <text class="time">{{ msg.time }}</text>
            </view>
            <view class="message-title">{{ msg.title }}</view>
            <view class="message-preview">{{ msg.preview }}</view>
          </view>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <text>加载中...</text>
      </view>
      
      <!-- 全部加载完毕 -->
      <view v-if="loadAll && messages.length > 0" class="load-all">
        <text>已加载全部消息</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 消息类型选项卡
const tabs = ref(['全部', '系统', '活动', '订单', '其他']);
const activeTab = ref(0);

// 消息列表数据（模拟数据）
const messages = ref([
  {
    id: 1,
    sender: '系统通知',
    title: '欢迎使用康怡之家',
    preview: '感谢您注册康怡之家，我们将为您提供最优质的养老服务...',
    time: '刚刚',
    read: false,
    icon: '&#xe65f;',
    type: '系统'
  },
  {
    id: 2,
    sender: '活动消息',
    title: '重阳节活动邀请',
    preview: '诚邀您参加10月14日举办的重阳节敬老活动，届时将有...',
    time: '10:30',
    read: false,
    icon: '&#xe668;',
    type: '活动'
  },
  {
    id: 3,
    sender: '订单通知',
    title: '养老院参观预约确认',
    preview: '您预约的明日上午10:00前往阳光养老院参观已确认...',
    time: '昨天',
    read: true,
    icon: '&#xe649;',
    type: '订单'
  },
  {
    id: 4,
    sender: '系统通知',
    title: '账户安全提醒',
    preview: '为了保障您的账户安全，请定期修改密码...',
    time: '3天前',
    read: true,
    icon: '&#xe65f;',
    type: '系统'
  },
  {
    id: 5,
    sender: '活动消息',
    title: '健康讲座预告',
    preview: '本周六下午2点将举办"老年人健康生活"专题讲座...',
    time: '5天前',
    read: true,
    icon: '&#xe668;',
    type: '活动'
  },
  {
    id: 6,
    sender: '其他消息',
    title: '您收到一条新的评论',
    preview: '有用户回复了您对阳光养老院的评价...',
    time: '一周前',
    read: true,
    icon: '&#xe60a;',
    type: '其他'
  }
]);

// 页面状态
const loading = ref(false);
const loadAll = ref(false);
const currentPage = ref(1);

// 切换选项卡
const switchTab = (index) => {
  activeTab.value = index;
  
  // 根据选项卡筛选消息
  filterMessages();
};

// 筛选消息
const filterMessages = () => {
  currentPage.value = 1;
  loadAll.value = false;
  
  if (activeTab.value === 0) {
    // 显示全部消息，这里不进行筛选，直接重置为原始数据
    // 实际开发中应该从服务器请求数据
    
    // 模拟从服务器获取数据
    loading.value = true;
    setTimeout(() => {
      messages.value = [
        {
          id: 1,
          sender: '系统通知',
          title: '欢迎使用康怡之家',
          preview: '感谢您注册康怡之家，我们将为您提供最优质的养老服务...',
          time: '刚刚',
          read: false,
          icon: '&#xe65f;',
          type: '系统'
        },
        {
          id: 2,
          sender: '活动消息',
          title: '重阳节活动邀请',
          preview: '诚邀您参加10月14日举办的重阳节敬老活动，届时将有...',
          time: '10:30',
          read: false,
          icon: '&#xe668;',
          type: '活动'
        },
        {
          id: 3,
          sender: '订单通知',
          title: '养老院参观预约确认',
          preview: '您预约的明日上午10:00前往阳光养老院参观已确认...',
          time: '昨天',
          read: true,
          icon: '&#xe649;',
          type: '订单'
        },
        {
          id: 4,
          sender: '系统通知',
          title: '账户安全提醒',
          preview: '为了保障您的账户安全，请定期修改密码...',
          time: '3天前',
          read: true,
          icon: '&#xe65f;',
          type: '系统'
        },
        {
          id: 5,
          sender: '活动消息',
          title: '健康讲座预告',
          preview: '本周六下午2点将举办"老年人健康生活"专题讲座...',
          time: '5天前',
          read: true,
          icon: '&#xe668;',
          type: '活动'
        },
        {
          id: 6,
          sender: '其他消息',
          title: '您收到一条新的评论',
          preview: '有用户回复了您对阳光养老院的评价...',
          time: '一周前',
          read: true,
          icon: '&#xe60a;',
          type: '其他'
        }
      ];
      loading.value = false;
    }, 300);
  } else {
    // 根据选项卡类型筛选消息
    const tabName = tabs.value[activeTab.value];
    
    // 模拟从服务器筛选数据
    loading.value = true;
    setTimeout(() => {
      messages.value = [
        {
          id: 1,
          sender: '系统通知',
          title: '欢迎使用康怡之家',
          preview: '感谢您注册康怡之家，我们将为您提供最优质的养老服务...',
          time: '刚刚',
          read: false,
          icon: '&#xe65f;',
          type: '系统'
        },
        {
          id: 2,
          sender: '活动消息',
          title: '重阳节活动邀请',
          preview: '诚邀您参加10月14日举办的重阳节敬老活动，届时将有...',
          time: '10:30',
          read: false,
          icon: '&#xe668;',
          type: '活动'
        },
        {
          id: 3,
          sender: '订单通知',
          title: '养老院参观预约确认',
          preview: '您预约的明日上午10:00前往阳光养老院参观已确认...',
          time: '昨天',
          read: true,
          icon: '&#xe649;',
          type: '订单'
        },
        {
          id: 4,
          sender: '系统通知',
          title: '账户安全提醒',
          preview: '为了保障您的账户安全，请定期修改密码...',
          time: '3天前',
          read: true,
          icon: '&#xe65f;',
          type: '系统'
        },
        {
          id: 5,
          sender: '活动消息',
          title: '健康讲座预告',
          preview: '本周六下午2点将举办"老年人健康生活"专题讲座...',
          time: '5天前',
          read: true,
          icon: '&#xe668;',
          type: '活动'
        },
        {
          id: 6,
          sender: '其他消息',
          title: '您收到一条新的评论',
          preview: '有用户回复了您对阳光养老院的评价...',
          time: '一周前',
          read: true,
          icon: '&#xe60a;',
          type: '其他'
        }
      ].filter(msg => msg.type === tabName);
      
      loading.value = false;
    }, 300);
  }
};

// 加载更多消息
const loadMore = () => {
  if (loading.value || loadAll.value) return;
  
  loading.value = true;
  currentPage.value++;
  
  // 模拟从服务器加载更多数据
  setTimeout(() => {
    if (currentPage.value >= 3) {
      // 没有更多数据了
      loadAll.value = true;
    } else {
      // 模拟追加消息
      const newMessages = [
        {
          id: 7,
          sender: '系统通知',
          title: '版本更新提醒',
          preview: '康怡之家已更新到最新版本，新增了多项实用功能...',
          time: '两周前',
          read: true,
          icon: '&#xe65f;',
          type: '系统'
        },
        {
          id: 8,
          sender: '活动消息',
          title: '中秋节活动回顾',
          preview: '感谢您参与我们的中秋团圆活动，以下是活动精彩回顾...',
          time: '一个月前',
          read: true,
          icon: '&#xe668;',
          type: '活动'
        }
      ];
      
      // 如果有选择特定分类，则筛选新消息
      if (activeTab.value !== 0) {
        const tabName = tabs.value[activeTab.value];
        const filteredNewMessages = newMessages.filter(msg => msg.type === tabName);
        messages.value = [...messages.value, ...filteredNewMessages];
      } else {
        messages.value = [...messages.value, ...newMessages];
      }
    }
    
    loading.value = false;
  }, 500);
};

// 标记消息为已读
const readMessage = (index) => {
  // 标记为已读
  messages.value[index].read = true;
  
  // 打开消息详情
  uni.navigateTo({
    url: `/pages/message-detail/index?id=${messages.value[index].id}`
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  // 初始加载消息
  filterMessages();
});
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  height: 100%;
}

.messages-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
  // 顶部导航栏
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
    
    .back-btn, .right-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 20px;
        color: #8d6e63;
      }
    }
    
    .title {
      flex: 1;
      text-align: center;
      
      text {
        font-size: 18px;
        font-weight: 600;
        color: #5d4037;
      }
    }
  }
  
  // 消息筛选选项卡
  .filter-tabs {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid rgba(141, 110, 99, 0.1);
    
    .tab-item {
      flex: 1;
      padding: 15px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      
      text {
        color: #8d6e63;
        font-size: 15px;
      }
      
      &.active {
        text {
          color: #5d4037;
          font-weight: 600;
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 20px;
          height: 2px;
          background-color: #5d4037;
          transform: translateX(-50%);
        }
      }
    }
  }
  
  // 消息列表
  .message-list {
    flex: 1;
    padding: 10px;
    
    .empty-state {
      padding: 50px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .empty-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(141, 110, 99, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        
        .iconfont {
          font-size: 30px;
          color: #8d6e63;
        }
      }
      
      .empty-text {
        color: #8d6e63;
        font-size: 14px;
      }
    }
    
    .message-item {
      display: flex;
      padding: 15px;
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      
      &.unread {
        background-color: rgba(141, 110, 99, 0.05);
      }
      
      &:active {
        background-color: rgba(141, 110, 99, 0.1);
      }
      
      .avatar {
        position: relative;
        margin-right: 15px;
        
        .avatar-img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background-color: #8d6e63;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .iconfont {
            color: #fff;
            font-size: 24px;
          }
        }
        
        .unread-badge {
          position: absolute;
          top: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #ff5252;
          border: 1px solid #fff;
        }
      }
      
      .message-content {
        flex: 1;
        overflow: hidden;
        
        .message-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          
          .sender {
            font-size: 15px;
            font-weight: 600;
            color: #5d4037;
          }
          
          .time {
            font-size: 12px;
            color: #bcaaa4;
          }
        }
        
        .message-title {
          font-size: 14px;
          color: #5d4037;
          margin-bottom: 5px;
        }
        
        .message-preview {
          font-size: 13px;
          color: #8d6e63;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    
    .loading-state, .load-all {
      text-align: center;
      padding: 15px 0;
      
      text {
        font-size: 13px;
        color: #bcaaa4;
      }
    }
  }
}
</style> 